<template>
  <van-field
    v-if="h5"
    v-model="fieldModel"
    :name="item.options && item.options.name"
    :label="item.options && item.options.label"
    :disabled="item.options && item.options.disabled"
    :required="item.options && !isDetail && item.options.required"
    :rules="isDetail ? [] : rules"
    :border="false"
    :label-width="item.options?.labelPosition === 'top' ? '100%' : undefined"
    :label-align="(item.options && item.options.labelPosition) || undefined"
    :input-align="(item.options && item.options.inputAlign) || undefined"
  >
    <template #input>
      <div v-if="fieldModel" class="signature-image">
        <van-image class="image" :src="fieldModel" />
        <div v-if="!isDetail" class="signature-input" @click="onClick">
          <van-icon name="edit" class="icon" /><span>{{ item.options.reSignText || '重新签名' }}</span>
        </div>
      </div>
      <div v-else-if="!isDetail" class="signature-input" @click="onClick">
        <van-icon name="edit" class="icon" /><span>{{ item.options.signText || '点击去签名' }}</span>
      </div>
    </template>
  </van-field>
  <widget-form-item
    v-else
    :designer="designer"
    :widget-list="widgetList"
    :item="item"
    :rules="isDetail ? [] : rules"
    :index="index"
    :show-message="!isDetail"
  >
    <div v-if="fieldModel" class="signature-image">
      <el-image class="image" :src="fieldModel" />
      <div v-if="!isDetail" class="signature-input" @click="onClick">
        <el-icon class="icon"><EditPen /></el-icon><span>{{ item.options.reSignText || '重新签名' }}</span>
      </div>
    </div>
    <div v-else-if="!isDetail" class="signature-input" @click="onClick">
      <el-icon class="icon"><EditPen /></el-icon><span>{{ item.options.signText || '点击去签名' }}</span>
    </div>
  </widget-form-item>
  <div v-if="show && !isDetail" class="signature-content">
    <van-signature
      :line-width="item.options.lineWidth"
      :background-color="item.options.backgroundColor"
      :pen-color="item.options.penColor"
      @submit="onSubmit"
    />
    <div v-if="showOverlay" class="overlay" @click="showOverlay = false">请在此空白处签名</div>
  </div>
</template>

<script>
import { ref, getCurrentInstance } from 'vue'
import props from './props'
import field from './field'

export default {
  name: 'MSignature',
  props,
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const { proxy } = getCurrentInstance()
    const show = ref(false)
    const showOverlay = ref(false)

    const onSubmit = ({ image }) => {
      show.value = false
      emit('update:modelValue', image)
    }

    const onClick = () => {
      if (props.h5) {
        show.value = !show.value
        showOverlay.value = show.value
      } else {
        proxy.$message.error('移动端支持签名！')
      }
    }

    return {
      show,
      showOverlay,
      onClick,
      onSubmit,
      ...field(props, emit)
    }
  }
}
</script>

<style lang="scss">
.signature-image {
  display: flex;
  align-items: center;
  .image {
    width: 140px;
    height: 60px;
    margin-right: 16px;
    border-radius: 4px;
  }
}
.signature-input {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #999;
  cursor: pointer;
  span {
    font-size: 12px;
  }
  .icon {
    font-size: 18px;
  }
}
.signature-content {
  position: relative;
  width: 100%;
  height: 100%;
  .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c8c9cc;
    font-size: 18px;
    font-family: none;
  }
}
</style>
